<template>
  <view class="attendance-record-page">
    <!-- 日期选择器 -->
    <view class="date-picker-section">
      <u-calendar
        v-model="selectedDate"
        :min-date="minDate"
        :max-date="maxDate"
        @change="handleDateChange"
        mode="date"
        :show-today="true"
      ></u-calendar>
    </view>

    <!-- 今日考勤状态 -->
    <view class="today-status-card">
      <view class="status-header">
        <text class="status-title">今日考勤状态</text>
        <text class="status-date">{{ formatDate(selectedDate) }}</text>
      </view>
      
      <view class="status-content">
        <view class="status-item">
          <view class="status-icon clock-in">
            <u-icon name="clock" color="#fff" size="20"></u-icon>
          </view>
          <view class="status-info">
            <text class="status-label">上班打卡</text>
            <text class="status-time">{{ todayAttendance.clockInTime || '未打卡' }}</text>
          </view>
        </view>
        
        <view class="status-item">
          <view class="status-icon clock-out">
            <u-icon name="clock" color="#fff" size="20"></u-icon>
          </view>
          <view class="status-info">
            <text class="status-label">下班打卡</text>
            <text class="status-time">{{ todayAttendance.clockOutTime || '未打卡' }}</text>
          </view>
        </view>
      </view>
      
      <view class="status-actions">
        <u-button
          v-if="!todayAttendance.clockInTime"
          type="primary"
          text="上班打卡"
          @click="handleClockIn"
        ></u-button>
        <u-button
          v-else-if="!todayAttendance.clockOutTime"
          type="success"
          text="下班打卡"
          @click="handleClockOut"
        ></u-button>
        <u-button
          v-else
          type="info"
          text="已完成"
          disabled
        ></u-button>
      </view>
    </view>

    <!-- 考勤记录列表 -->
    <view class="attendance-list-section">
      <view class="section-header">
        <text class="section-title">考勤记录</text>
        <u-button
          type="info"
          size="small"
          text="统计"
          @click="handleStatistics"
        ></u-button>
      </view>
      
      <view class="attendance-list">
        <view
          v-for="record in attendanceList"
          :key="record.id"
          class="attendance-item"
        >
          <view class="record-date">
            <text class="date-text">{{ formatDate(record.attendanceDate) }}</text>
            <text class="week-text">{{ getWeekDay(record.attendanceDate) }}</text>
          </view>
          
          <view class="record-times">
            <view class="time-item">
              <u-icon name="clock" size="14" color="#2d8cf0"></u-icon>
              <text class="time-text">{{ record.clockInTime || '--' }}</text>
            </view>
            <view class="time-item">
              <u-icon name="clock" size="14" color="#ff9500"></u-icon>
              <text class="time-text">{{ record.clockOutTime || '--' }}</text>
            </view>
          </view>
          
          <view class="record-status">
            <u-tag
              :text="getStatusText(record.status)"
              :type="getStatusType(record.status)"
              size="mini"
            ></u-tag>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="attendanceList.length === 0 && !loading" class="empty-state">
      <u-empty
        text="暂无考勤记录"
        mode="data"
      ></u-empty>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <u-loading-icon mode="spinner"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'AttendanceRecord',
  setup() {
    // 响应式数据
    const loading = ref(false)
    const selectedDate = ref(new Date())
    const minDate = ref(new Date(2024, 0, 1))
    const maxDate = ref(new Date())
    const todayAttendance = ref({})
    const attendanceList = ref([])

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        1: '正常',
        2: '迟到',
        3: '早退',
        4: '缺勤'
      }
      return statusMap[status] || '未知'
    }

    // 获取状态类型
    const getStatusType = (status) => {
      const typeMap = {
        1: 'success',
        2: 'warning',
        3: 'warning',
        4: 'error'
      }
      return typeMap[status] || 'default'
    }

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }

    // 获取星期
    const getWeekDay = (date) => {
      if (!date) return ''
      const d = new Date(date)
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
      return `周${weekDays[d.getDay()]}`
    }

    // 加载今日考勤状态
    const loadTodayAttendance = async () => {
      try {
        // TODO: 调用后端API获取今日考勤状态
        // 模拟数据
        todayAttendance.value = {
          clockInTime: '09:00',
          clockOutTime: null,
          status: 1
        }
      } catch (error) {
        console.error('加载今日考勤状态失败:', error)
      }
    }

    // 加载考勤记录
    const loadAttendanceList = async () => {
      try {
        loading.value = true
        // TODO: 调用后端API获取考勤记录
        // 模拟数据
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        attendanceList.value = [
          {
            id: 1,
            attendanceDate: '2025-01-30',
            clockInTime: '09:00',
            clockOutTime: '18:00',
            status: 1
          },
          {
            id: 2,
            attendanceDate: '2025-01-29',
            clockInTime: '09:15',
            clockOutTime: '18:30',
            status: 2
          },
          {
            id: 3,
            attendanceDate: '2025-01-28',
            clockInTime: '08:45',
            clockOutTime: '17:30',
            status: 1
          },
          {
            id: 4,
            attendanceDate: '2025-01-27',
            clockInTime: null,
            clockOutTime: null,
            status: 4
          }
        ]
      } catch (error) {
        console.error('加载考勤记录失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      } finally {
        loading.value = false
      }
    }

    // 日期变化
    const handleDateChange = (date) => {
      selectedDate.value = date
      loadAttendanceList()
    }

    // 上班打卡
    const handleClockIn = async () => {
      try {
        // TODO: 调用后端API上班打卡
        console.log('上班打卡')
        
        uni.showToast({
          title: '打卡成功',
          icon: 'success'
        })
        
        loadTodayAttendance()
      } catch (error) {
        console.error('上班打卡失败:', error)
        uni.showToast({
          title: '打卡失败',
          icon: 'error'
        })
      }
    }

    // 下班打卡
    const handleClockOut = async () => {
      try {
        // TODO: 调用后端API下班打卡
        console.log('下班打卡')
        
        uni.showToast({
          title: '打卡成功',
          icon: 'success'
        })
        
        loadTodayAttendance()
      } catch (error) {
        console.error('下班打卡失败:', error)
        uni.showToast({
          title: '打卡失败',
          icon: 'error'
        })
      }
    }

    // 查看统计
    const handleStatistics = () => {
      uni.showToast({
        title: '统计功能开发中',
        icon: 'none'
      })
    }

    // 页面加载
    onMounted(() => {
      loadTodayAttendance()
      loadAttendanceList()
    })

    return {
      loading,
      selectedDate,
      minDate,
      maxDate,
      todayAttendance,
      attendanceList,
      getStatusText,
      getStatusType,
      formatDate,
      getWeekDay,
      handleDateChange,
      handleClockIn,
      handleClockOut,
      handleStatistics
    }
  }
}
</script>

<style lang="scss" scoped>
.attendance-record-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.date-picker-section {
  background: #fff;
  margin-bottom: 20rpx;
}

.today-status-card {
  background: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .status-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .status-date {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .status-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .status-item {
      display: flex;
      align-items: center;
      
      .status-icon {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15rpx;
        
        &.clock-in {
          background: #2d8cf0;
        }
        
        &.clock-out {
          background: #ff9500;
        }
      }
      
      .status-info {
        .status-label {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 4rpx;
        }
        
        .status-time {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
      }
    }
  }
  
  .status-actions {
    text-align: center;
  }
}

.attendance-list-section {
  background: #fff;
  margin: 0 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    padding: 30rpx 30rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .attendance-list {
    padding: 20rpx 30rpx 30rpx;
    
    .attendance-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-date {
        width: 120rpx;
        flex-shrink: 0;
        
        .date-text {
          display: block;
          font-size: 26rpx;
          color: #333;
          margin-bottom: 4rpx;
        }
        
        .week-text {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .record-times {
        flex: 1;
        display: flex;
        justify-content: space-around;
        
        .time-item {
          display: flex;
          align-items: center;
          
          .time-text {
            margin-left: 8rpx;
            font-size: 24rpx;
            color: #666;
          }
        }
      }
      
      .record-status {
        margin-left: 20rpx;
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.loading-state {
  padding: 100rpx 0;
  text-align: center;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}
</style>
